<template>
    <div>
        <a-page-header title="基础组件" :ghost="false" sub-title="基础组件" />

        <a-back-top />
        <a-card class="mt-2">
            <template #title>
                Affix 固钉
                <small class="text-muted">将页面元素钉在可视范围。</small>
            </template>

            <a-affix :offset-top="top">
                <a-button type="primary" @click="top += 10">
                    Affix top
                </a-button>
            </a-affix>
        </a-card>

        <a-card class="mt-2">
            <template #title>
                Breadcrumb面包屑
                <small class="text-muted">
                    显示当前页面在系统层级结构中的位置，并能向上返回。
                </small>
            </template>
            <a-row :gutter="[16, 16]">
                <a-col :span="12">
                    <a-divider orientation="left"> 基本用法 </a-divider>
                    <a-breadcrumb>
                        <a-breadcrumb-item href="">
                            <router-link :to="{ name: 'Home' }">
                                <icon name="HomeOutlined" />
                                <span> 首页</span>
                            </router-link>
                        </a-breadcrumb-item>
                        <a-breadcrumb-item href="">
                            <icon name="UserOutlined" />
                            <span> 用户管理</span>
                        </a-breadcrumb-item>
                        <a-breadcrumb-item> 权限管理 </a-breadcrumb-item>
                    </a-breadcrumb>
                </a-col>
                <a-col :span="12">
                    <a-divider orientation="left"> 自定义分割符 </a-divider>
                    <a-breadcrumb separator="-">
                        <a-breadcrumb-item href="">
                            <router-link :to="{ name: 'Home' }">
                                <icon name="HomeOutlined" />
                                <span> 首页</span>
                            </router-link>
                        </a-breadcrumb-item>
                        <a-breadcrumb-item href="">
                            <icon name="UserOutlined" />
                            <span> 用户管理</span>
                        </a-breadcrumb-item>
                        <a-breadcrumb-item> 权限管理 </a-breadcrumb-item>
                    </a-breadcrumb>
                </a-col>
            </a-row>
        </a-card>

        <a-card class="mt-2">
            <template #title>
                Pagination 分页
                <small class="text-muted"
                    >采用分页的形式分隔长列表，每次只加载一个页面。</small
                >
            </template>

            <a-pagination
                show-size-changer
                v-model:current="pagination.current"
                v-model:pageSize="pagination.pageSize"
                :total="500"
                @showSizeChange="onShowSizeChange"
            />
        </a-card>

        <a-card class="mt-2">
            <template #title>
                Steps 步骤条
                <small class="text-muted"
                    >引导用户按照流程完成任务的导航条。</small
                >
            </template>

            <a-row :gutter="16">
                <a-col :span="12">
                    <a-divider> 水平方向 </a-divider>
                    <!-- <a-steps :current="1">
                        <a-step title="提交" description="提交信息" />
                        <a-step>
                            <template #title> 验证 </template>
                            <template #subTitle>
                                <span>
                                    <a-tag color="blue"> Active </a-tag></span
                                >
                            </template>
                            <template #description>
                                <span>验证信息</span>
                            </template>
                        </a-step>

                        <a-step title="完成" description="提交完成！" />
                    </a-steps> -->
                </a-col>
                <a-col :span="8" :offset="4">
                    <a-divider> 垂直方向 </a-divider>
                    <!-- <a-steps direction="vertical" :current="1">
                        <a-step title="提交" description="提交信息" />
                        <a-step>
                            <template #title> 验证 </template>
                            <template #subTitle>
                                <span>
                                    <a-tag color="blue"> Active </a-tag></span
                                >
                            </template>
                            <template #description>
                                <span>验证信息</span>
                            </template>
                        </a-step>

                        <a-step title="完成" description="提交完成！" />
                    </a-steps> -->
                </a-col>
            </a-row>
        </a-card>

        <a-card class="mt-2">
            <template #title>
                Timeline 时间轴
                <small class="text-muted">
                    采用分页的形式分隔长列表，每次只加载一个页面。
                </small>
            </template>
            <div
                style="display: flex; justify-content: space-around"
                class="mb-3"
            >
                <a-button-group>
                    <a-button type="primary" @click="changeMode('left')">
                        左
                    </a-button>
                    <a-button type="primary" @click="changeMode('alternate')">
                        中
                    </a-button>
                    <a-button type="primary" @click="changeMode('right')">
                        右
                    </a-button>
                </a-button-group>
                <a-button type="primary" @click="reverse"> reverse </a-button>
            </div>
            <a-row>
                <a-col :span="12" :offset="6">
                    <a-timeline
                        :mode="timeline.mode"
                        pending="Pending..."
                        :reverse="timeline.reverse"
                    >
                        <a-timeline-item
                            v-for="(item, i) in timelineData"
                            :key="i"
                        >
                            <template v-if="item.icon" #dot>
                                <icon :name="item.icon" />
                            </template>
                            {{ item.title }}
                        </a-timeline-item>
                    </a-timeline>
                </a-col>
            </a-row>
        </a-card>

        <a-card class="mt-2">
            <template #title>
                Alert、Message、Notification、Modal
                <small class="text-muted">
                    警告提示、全局提示、通知提醒框、对话框
                </small>
            </template>

            <a-divider> Alert 警告提示 </a-divider>
            <a-alert
                class="mb-2"
                message="成功"
                description="订单提交成功."
                type="success"
                show-icon
            />
            <a-alert
                class="mb-2"
                message="信息"
                description="订单提交成功"
                type="info"
                show-icon
            />
            <a-alert
                class="mb-2"
                message="警告"
                description="提交信息有误."
                type="warning"
                show-icon
            />
            <a-alert
                class="mb-2"
                message="错误"
                description="用户名或密码错误."
                type="error"
                show-icon
            />
            <a-divider> Message 全局提示 </a-divider>
            <div
                style="display: flex; justify-content: space-around"
                class="mb-3"
            >
                <a-button type="primary" @click="onMessage('info')">
                    Info
                </a-button>
                <a-button type="primary" @click="onMessage('waring')">
                    Waring
                </a-button>
                <a-button type="primary" @click="onMessage('success')">
                    Success
                </a-button>
                <a-button type="danger" @click="onMessage('error')">
                    Error
                </a-button>
                <a-button type="danger" @click="onMessage('loading1')">
                    Loading1
                </a-button>
                <a-button type="danger" @click="onMessage('loading2')">
                    Loading2- with key
                </a-button>
            </div>

            <a-divider> Notification 通知提醒框 </a-divider>
            <div
                style="display: flex; justify-content: space-around"
                class="mb-3"
            >
                <a-button type="primary" @click="onNotification('info')">
                    Info
                </a-button>
                <a-button type="primary" @click="onNotification('waring')">
                    Waring
                </a-button>
                <a-button type="primary" @click="onNotification('success')">
                    Success
                </a-button>
                <a-button type="danger" @click="onNotification('error')">
                    Error
                </a-button>
            </div>
        </a-card>
    </div>
</template>

<script lang="ts">
import { defineComponent, markRaw, reactive, ref, watch } from "vue";

import {
    Tag, Steps, Affix, Divider, Card, Timeline, Alert, message,
    Button, Breadcrumb, Row, Col, PageHeader, Pagination, BackTop, notification
} from "ant-design-vue";
import { Icon } from "@/components";
import { ClockCircleOutlined } from "@ant-design/icons-vue";
export default defineComponent({
    components: {
        ATimeline: Timeline,
        ABackTop: BackTop,
        AAlert: Alert,
        ATimelineItem: Timeline.Item,
        ACard: Card,
        AAffix: Affix,
        AButton: Button,
        AButtonGroup: Button.Group,
        ABreadcrumb: Breadcrumb,
        ABreadcrumbItem: Breadcrumb.Item,
        ADivider: Divider,
        APageHeader: PageHeader,
        APagination: Pagination,
        ASteps: Steps,
        AStep: Steps.Step,
        ATag: Tag,
        ARow: Row,
        ACol: Col,
        ClockCircleOutlined,
        Icon
    },
    setup() {
        const top = ref(40)

        const pagination = reactive({
            pageSize: 20,
            current: 3,
        })

        watch(() => pagination.pageSize, (val) => {
            console.log('pageSize', val);
        })

        watch(() => pagination.current, (val) => {
            console.log('current', val);
        })
        const onShowSizeChange = (current: number, pageSize: number) => {
            console.log(current, pageSize);
        }


        const timelineData = markRaw([
            { title: '吃饭 7:00', icon: 'ClockCircleOutlined' },
            { title: '工作 9:00', icon: '' },
            { title: '吃饭 12:00', icon: '' },
            { title: '工作 13:00', icon: '' },
            { title: '吃饭 18:00', icon: '' },
            { title: '睡觉 21:00', icon: 'ClockCircleOutlined' },
        ])
        const timeline = reactive({
            mode: 'alternate',
            reverse: false
        })

        const changeMode = (mode: string) => {
            timeline.mode = mode
        }
        const reverse = () => {
            timeline.reverse = !timeline.reverse
        }

        const onMessage = (name: string) => {
            switch (name) {
                case 'info':
                    message.info('this is info')
                    break
                case 'error':
                    message.error('this is error')
                    break
                case 'success':
                    message.success('this is success')
                    break
                case 'waring':
                    message.warn('this is waring')
                    break
                case 'loading1':
                    message.loading('this is loading, Closed after 3 seconds', 3)
                        .then(() => message.info('Closed'), () => { })
                    break
                case 'loading2':
                    let key: string = 'loading2'
                    message.loading({ content: 'Loading...', key, duration: 3 });
                    setTimeout(() => {
                        message.success({ content: 'Loaded!', key, duration: 2 });
                    }, 1000);
                    break
            }
        }


        const onNotification = (name: string) => {
            switch (name) {
                case 'info':
                    notification.info({
                        message: '标题',
                        description: 'notification 内容',
                        placement: 'topLeft'
                    })
                    break
                case 'error':
                    notification.error({
                        message: '标题',
                        description: 'notification 内容 （默认位置）',
                        placement: 'topRight'
                    })
                    break
                case 'success':
                    notification.success({
                        message: '标题',
                        description: 'notification 内容',
                        placement: 'bottomLeft'
                    })
                    break
                case 'waring':
                    notification.warn({
                        message: '标题',
                        description: 'notification 内容',
                        placement: 'bottomRight'
                    })
                    break
            }
        }
        return {
            top,
            pagination,
            onShowSizeChange,
            timelineData,
            timeline,
            changeMode,
            reverse,
            onMessage,
            onNotification,
        }
    },
});
</script>

<style lang="less" scoped>
</style>
